<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ichartjs 示例</title>
		<meta name="Description" content="The ichartjs's gallery center,ichartjs 示例中心" />
		<meta name="Keywords" content="ichartjs demo,Html5 demo,ichartjs示例,ichartjs示例,Html5示例,Html5示例" />
		<script type="text/javascript" src="../../ichart.1.2.1.min.js"></script>
		<link rel="stylesheet" href="../css/demo.css" type="text/css"/>
		<script type="text/javascript">
	$(function(){
		var flow=[];
		for(var i=0;i<61;i++){
			flow.push(Math.floor(Math.random()*(30+((i%12)*5)))+10);
		}
		
		var data = [
		         	{
		         		name : 'PV',
		         		value:flow,
		         		color:'#0d8ecf',
		         		line_width:2
		         	}
		         ];
		var labels = ["2012-12-01","2012-12-02","2012-12-03","2012-12-04","2012-12-05","2012-12-06"];
		var chart = new iChart.LineBasic2D({
			render : 'canvasDiv',
			data: data,
			align:'center',
			title : {
				text:'ichartjs官方网站最近5天PV流量趋势',
				fontsize:24,
				color:'#f7f7f7'
			},
			subtitle : {
				text:'平均18:00-22:00访问量达到最大值(单位：万)',
				color:'#f1f1f1'
			},
			footnote : {
				text:'数据来源：模拟数据',
				color:'#f1f1f1'
			},
			width : 800,
			height : 400,
			shadow:true,
			shadow_color : '#20262f',
			shadow_blur : 4,
			shadow_offsetx : 0,
			shadow_offsety : 2,
			background_color:'#383e46',
			tip:{
				enable:true,
				shadow:true
			},
			crosshair:{
				enable:true,
				line_color:'#62bce9'
			},
			sub_option : {
				label:false,
				hollow_inside:false,
				point_size:8
			},
			coordinate:{
				width:640,
				height:260,
				grid_color:'#cccccc',
				axis:{
					color:'#cccccc',
					width:[0,0,2,2]
				},
				grids:{
					vertical:{
						way:'share_alike',
				 		value:5
					}
				},
				scale:[{
					 position:'left',	
					 start_scale:0,
					 end_scale:100,
					 scale_space:10,
					 scale_size:2,
					 label : {color:'#ffffff',fontsize:11},
					 scale_color:'#9f9f9f'
				},{
					 position:'bottom',	
					 label : {color:'#ffffff',fontsize:11},
					 labels:labels
				}]
			}
		});
		
		//开始画图
		chart.draw();
	});
	</script>
</head>
<body>
	<div id='canvasDiv'></div>
	<div class='ichartjs_info'>
		<span class='ichartjs_author'>written by <a title="示例的贡献者" href="mailto:taylor@ichartjs.com">taylor</a></span>
		<span class='ichartjs_btn' onmouseover="this.style.color='#2f99ff'" onmouseout="this.style.color='#0b2946'" onclick="window.top.viewCode(document);">View Code</span>
		<div class='ichartjs_sm'>说明</div>
		<div class='ichartjs_details'>
			这是一个很常见的的折线图示例，示例展示了网站最近5天的流量统计。每隔2个小时统计一次。通过统计图可以看出每天晚上18：00-22：00访问量较大。
		</div>
		<span class='ichartjs_sm'>备注：</span>
		<span class='ichartjs_details'>
			数据均为模拟。
		</span>
	</div>
</body>
</html>

